import React, { useState, useEffect } from 'react';
import { InputNumber, Modal, Row, Col, message, Input } from 'antd';

import './Doodle.css';
import './App.scss';

import { appendLotteryCode, getLotteryCode } from '../store/index';
import Home from './Home';

export default function App() {
    const [step, setStep] = useState(1);
    const [visible, setVisible] = useState(false);
    const [min, setMin] = useState(1);
    const [max, setMax] = useState(100);
    const [filterNum, setFilterNum] = useState('');

    const handleOk = () => {
        if (min === max || min > max) {
            return message.error('请输入正确的号码区间');
        }

        appendLotteryCode((max - min) + 1, filterNum.split(';'));
        setVisible(false);
    };

    useEffect(() => {
        const lotteryCode = getLotteryCode();
        setVisible(lotteryCode.length === 0);
    }, []);

    return (
        <>
            {
                step === 1 ?
                <div className="body">    
                    <css-doodle use="var(--rule)"></css-doodle>
                    <div className="loaderWrapper">
                        <div className="loader"></div>
                    </div>
                    <div className="start--btn">
                        <button className="start--btn__go" onClick={() => setStep(2)}>
                            <span>GO</span>
                        </button>
                    </div>
                    <Modal closable={false} title="抽奖设置" visible={visible} onOk={handleOk}>
                        <Row className="list">
                            <Col span={4} className="list--label">
                                开始号码:
                            </Col>
                            <Col span={18}>
                                <InputNumber min={1} max={100000} onChange={setMin} value={min} />
                            </Col>
                        </Row>
                        <Row className="list">
                            <Col span={4} className="list--label">
                                结束号码:
                            </Col>
                            <Col span={18}>
                                <InputNumber min={min} max={100000} onChange={setMax} value={max} />
                            </Col>
                        </Row>
                        <Row className="list">
                            <Col span={4} className="list--label">
                                排除号码:
                            </Col>
                            <Col span={18}>
                                <Input.TextArea rows={4} placeholder="使用数字;分割" showCount value={filterNum} onChange={e => setFilterNum(e.target.value)}/>
                            </Col>
                        </Row>
                    </Modal>
                </div> :
                <Home />
            }
        </>
    );
}